<template>
	<m-layout2 gap="24" title="头像">
		<view class="li">
			<template v-for="(item,idx) in isImg">
				<m-avatar :type="item.name" size="90" @click="setAvatar(item.name)"></m-avatar>
			</template>
		</view>
		<!-- <view class="btn-box" slot="footer">
			<m-button >{{$t('queding')}}</m-button>
		</view> -->
	</m-layout2>
</template>

<script>
	const files = require.context("@/static/images/avatar", false, /\.png|.jpg|.gif|.svg$/);
	import { SetHeadpic } from '@/api/Users.js'
	import { mapState, mapActions } from 'vuex'
	export default {
		data() {
			return {

			};
		},
		computed: {
			isImg() {
				let a = [];
				files.keys().forEach(key => {
					let name = key.slice(2, -4).toLowerCase()
					a.push({
						name:name,
					})
				});
				return a
			},
			...mapState({
				userinfo: state => state.user.userinfo
			}),
		},
		mounted() {},
		methods: {
			async setAvatar(name) {
				const success = await SetHeadpic({
					headpic: name,
				})
				if (success) {
					this.Jump()
				}
			},
		},

	}
</script>

<style lang="scss">
	.li {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-gap: 30rpx;
	}

	.btn-box {
		padding: 24rpx;
	}
</style>